﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example10.aspx.cs" Inherits="Chapter10.Example10" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 10-10 使用 summary 和 details 元素</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" href="Example01.Favicon.ico" type="image/x-ico" />
    <style>
        h1, h2, h3, acticle > footer {
            background: grey;
            color: white;
        }

        hgroup > h1 {
            margin-bottom: 0;
            margin-top: 0;
        }

        hgroup > h2 {
            background: grey;
            color: white;
            font-size: 1em;
            margin-top: 0px;
        }

        body > header *, body > fotter > * {
            background: transparent;
            color: black;
        }


        body > article > section, body > article > section > section {
            margin-left: 10px;
        }

        body > header {
            border: medium solid black;
            padding-left: 5px;
            margin: 10px 0 10px 0;
        }

        details > summary {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <header>
        <hgroup>
            <h1>Things I like</h1>
            <h2>by Adam Freeman</h2>
        </hgroup>
        <nav>
            <h1>Contents</h1>
            <ul>
                <li><a href="#fruitsilike">Fruits I Like</a></li>
                <li><a href="#morefruit">Additional Fruits</a></li>
            </ul>
        </nav>
    </header>

    <article>
        <header>
            <hgroup>
                <h1 id="activitiesilike">Activities I like</h1>
                <h2>It hurts, but I keep doing it</h2>
            </hgroup>
        </header>
        <section>
            <p>I like to swim, cycle and run, I am in traning for my first triathlon, but it is hard work.</p>
            <details open="open">
                <summary>Kinds of Triathlon</summary>
                There are different kinds of triathlon - sprint, Olympic and so on.
                I am aiaming for Olympic, which consists of the following:
                 <ol>
                     <li>1.5km swim</li>
                     <li>40km cycle</li>
                     <li>10km run</li>
                 </ol>
            </details>
        </section>
    </article>
</body>
</html>
